<template>
  <div>
		<Card>
			<div class="title">
				沟通记录
			</div>
			<div class="section">
				<template v-for="item in workList">
					<div class="userInfor"  :key="item.id">
						<img :src="item.headPhoto"  />
						<div class="infor">
							<div>
								<span class="name">{{item.name}}：</span>
								<span class="problem">{{item.worklist.problemDescription}}</span>
							</div>
							<div>
								<span class="time">{{item.date}}</span>
							</div>
						</div>
					</div>
					<div class="personnel" v-for="item1 in item.feedBackMessagelist" :key="item1.date">
						<img src="@/assets/images/head-portrait.jpg"  />
						<div class="infor">
							<div>
								<span class="name">工程师：</span>
								<span class="problem">{{item1.solution}}</span>
							</div>
							<div>
								<span class="time">{{item1.date}}</span>
							</div>
						</div>
					</div>
				</template>
			</div>
		</Card>
		<Card>
			<div class="title">
				沟通记录
			</div>
			<div class="section">
				<Input v-model="solution" type="textarea" :rows="4" placeholder="Enter something..." style="width:60%;margin:20px" :disabled="status==4"/>
				<Button type="warning" size="large" @click="submit()" style="margin:0 0 20px 20px;display:block" :disabled="status==4">提交</Button>
			</div>
		</Card>
  </div>
</template>

<script>
import util from '@/utils/index'
export default {
  data () {
    return {
			workList: {},
			solution: '',
			id: '',
			workcode: '',
			newList: [],
			status: 0
    }
  },
  methods: {
		confirm () {
		},
		getList () {
			// 获取工单问题类别
			this.$api.get(0, '/wl/v2/feedbackMessage/list/workCode', {workCode: this.workcode}, r => {
				if (r.data.code === 0) {
					this.workList = r.data.data
					this.newList = []
					for (var i = 0; i < r.data.data.length; i++) {
						this.$api.get(0, '/usr/v2/user', {uId: this.uid}, data => {
							this.newList.push(data.data.data)
							for (var c = 0; c < this.newList.length; c++) {
								this.$set(this.workList[c], 'name', this.newList[c].userName)
								this.$set(this.workList[c], 'headPhoto', this.newList[c].headPhoto)
							}
						})
					}
					this.id = r.data.data[r.data.data.length - 1].worklist.id
				} else {
					this.$Message.error('获取失败')
				}
			})
		},
		// 提交
		submit () {
			if (this.solution.trim() !== '') {
				this.$api.post(0, 'wl/v2/feedbackMessage', {feedbackId: this.id, solution: this.solution, date: util.getCurrentDate()}, r => {
					if (r.data.code === 0) {
						this.$Message.success('提交成功')
						this.solution = ''
						this.getList()
					}
				})
			} else {
				this.$Message.warning('不可发送空消息')
			}
		}
  },
  mounted () {
		this.workcode = this.$route.params.workcode
		this.uid = this.$route.params.uid
		this.status = this.$route.params.status
		this.getList()
  }
}
</script>

<style>
	li{
		list-style: none;
	}
	span.label{
		color:#cccccc;
	}
	span.text{
		margin-right:40px
	}
	div.button{
		float:right;
		position:relative;
		top:-15px
	}
	span.status{
		color:#FF475A
	}
	div.title{
		background:#eeeeff;
		padding:15px 10px;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
	}
	div.section{
		border:1px solid #ddd;
		border-bottom-left-radius:5px;
		border-bottom-right-radius:5px;
	}
	div.userInfor,div.personnel{
		padding:20px;
	}
	div.personnel,div.userInfor{
		border-top:1px solid #ddd
	}
	div.userInfor img,div.personnel img{
		height:40px;
		width:40px;
		border-radius:50%;
		float:left;
		margin-right:20px
	}
	div.infor{
		float:left
	}
	div.userInfor:after,div.personnel:after{
		content:'';
		display:block;
		clear:both
	}
</style>
